<template>
  <div class="address-pos">
    <!--    添加菜品-->
    <form class="form-inline">
      <!--      @submit.prevent="onFormSubmit"-->
      <div class="input-group mb-2 mr-sm-2">
        <!-- 输入框的前缀 -->
        <div class="input-group-prepend">
          <div class="input-group-text">姓名</div>
        </div>
        <!-- 文本输入框 -->
        <input type="text" class="form-control" placeholder="收件人信息" style="width: 356px;" v-model.trim="InputAddress.name" />
        <div class="input-group-prepend">
          <div class="input-group-text">手机号</div>
        </div>
        <input type="text" class="form-control" placeholder="手机号" style="width: 356px;" v-model.trim="InputAddress.phoneNumber" />
        <div class="input-group-prepend">
          <div class="input-group-text">收货地址</div>
        </div>
        <input type="text" class="form-control" placeholder="收货地址" style="width: 356px;" v-model.trim="InputAddress.address" />
      </div>
      <!-- 添加按钮 -->
      <button type="submit" class="btn btn-primary mb-2" @click.prevent="insertAddress">添加收货地址</button>

    </form>

  </div>


  <div>
    <table class="table">
      <thead>
      <tr>

        <th scope="col">#</th>
        <th scope="col">name</th>
        <th scope="col">phoneNumber</th>
        <th scope="col">address</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in AddressList" :key="item.addressNumber">
        <th scope="row">{{++index}}</th>
        <td>
          <input class="btn btn-primary" :placeholder="item.name" v-model="item.name" style="width: 150px">
          <button type="button" class="btn btn-primary" @click.prevent="updateName(item)">更新</button>
        </td>
        <td>
          <input class="btn btn-primary" :placeholder="item.phoneNumber" v-model="item.phoneNumber">
          <button type="button" class="btn btn-primary" @click.prevent="updatePhoneNumber(item)">更新</button>
        </td>
        <td>
          <input class="btn btn-primary" :placeholder="item.address" v-model="item.address" style="width: 500px">
          <button type="button" class="btn btn-primary" @click.prevent="updateAddress(item)">更新</button>
        </td>
        <td><button type="submit" class="btn btn-primary mb-2" style="background-color: red;border: none" @click.prevent="deleteAddress(item)">删除</button></td>
      </tr>

      </tbody>
    </table>
  </div>





</template>

<script>
export default {
  name: 'Address',

  data() {
    return {
      InputAddress: {
        customerPhoneNumber: "",
        name: "",
        phoneNumber: "",
        address: "",
      },

      //接传回来的所有地址
      AddressList: [],
    }
  },

  methods: {
    async getAddress() {
      const {data: res} = await this.$http.get('/address/addressList?phoneNumber='+localStorage.getItem("username_C"))
      this.AddressList=res.data
    },

    async insertAddress() {
      this.InputAddress.customerPhoneNumber=localStorage.getItem("username_C")
      const {data: res} = await this.$http.post('/address/insertAddress',this.InputAddress)
      await this.getAddress()
    },

    async updateName(item) {
      const {data: res} = await this.$http.get('/address/updateName?AddressNumber='+item.addressNumber
          +'&name='+item.name)
      await this.getAddress()
    },

    async updatePhoneNumber(item) {
      const {data: res} = await this.$http.get('/address/updatePhoneNumber?AddressNumber='+item.addressNumber
          +'&phoneNumber='+item.phoneNumber)
      await this.getAddress()
    },

    async updateAddress(item) {
      const {data: res} = await this.$http.get('/address/updateAddress?AddressNumber='+item.addressNumber
          +'&address='+item.address)
      await this.getAddress()
    },

    async deleteAddress(item) {
      const {data: res} = await this.$http.get('/address/delete?AddressNumber='+item.addressNumber)
      await this.getAddress()
    }



  },



  created() {
    this.getAddress()
  }

}
</script>

<style lang="less" scoped>
.address-pos{
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  border: 50px solid white;

}
</style>
